import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtSearchBar, AtTabs, AtTabsPane } from 'taro-ui'
// 接口
// import discoveryApi from '@api/discovery'

import Personal from './Personal'
import Broadcaster from './Broadcaster'

import './index.scss'

export default class Index extends Component {

  config = {
    enablePullDownRefresh: false,
    navigationBarTitleText: '乐库'
  }

  constructor () {
    super(...arguments)
    this.state = {
      value: '',
      current: 0,
      tabList: [
        {
          title: '个性推荐'
        },
        {
          title: '主播电台'
        }
      ]
    }
  }

  componentWillMount () { }

  componentDidMount () {  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  onChange (value) {
    this.setState({
      value: value
    })
  }

  handleClick (value) {
    this.setState({
      current: value
    })
  }

  // 搜索框聚焦
  handleFocus () {
    Taro.navigateTo({
      url: '/pages/search/index'
    })
  }

  render () {
    return (
      <View className='index'>
        {/* 搜索框 */}
        <AtSearchBar
          placeholder='请输入歌手或歌手名'
          value={this.state.value}
          fixed
          onFocus={this.handleFocus.bind(this)}
          onChange={this.onChange.bind(this)}
        />
        {/* tab栏 */}
        <AtTabs current={this.state.current} tabList={this.state.tabList} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={this.state.current} index={0} >
            <Personal />
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <Broadcaster />
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}
